<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue - Demo</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id='app'>{{message}}
        <div>11 + 22 = {{add(11,22)}}</div>
        <div>10 &times; 20 = {{times(10,20)}}</div>
    </div>
    <script type="text/javascript">
        new Vue({
            // el标记对应DOM元素中的id
            el: '#app',
            // data定义属性
            data: {
                message: 'Hello Vue.js'
            },
            // methods定义方法
            methods: {
                add: function (p1, p2) {
                    return p1 + p2;
                },
                times: function (p1, p2) {
                    return p1 * p2;
                },
            },
        });
    </script>
    <hr>
    <!-- 基础语法 -->
    <div id='app2'>
        <h4>site :{{site}}</h4>
        <h4>count:{{count}}</h4>
        <h4>url :{{url}}</h4>
    </div>
    <script type="text/javascript">
        var data2 = {
            site: "our site",
            count: 1998,
            url: 'none url',
        }
        var vm2 = new Vue({
            el: '#app2',
            data: data2
        })
        // 验证是否为同一对象
        document.write("Is Equal?:\t" + (vm2.site == data2.site));
        document.write('<br>')
        vm2.site = 'This is our site.'
        document.write(data2.site + '<br>')
        // 使用$前缀使用实例方法/属性
        document.write(vm2.$el = document.getElementById(vm2.el))
        document.write(vm2.$el.id)
    </script>
    <hr>
    <!-- 模板语法 -->
    <div id='app3'>
        <div v-html='msg'>v-html</div>
        <div v-bind:class="{'background-color: lightblue;':use}">v-bind:style - use</div>
    </div>
    <script type="text/javascript">
        var vm3 = new Vue({
            el: '#app3',
            data: {
                msg: '<a href="#">a标签</a>',
                use: true,
                uuse: false,
            },
        })
    </script>
</body>

</html>